<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-header-bar{
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
    .layout-header{
        height: 60px;
        background: #f8f8f9;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
        text-align: right;
    }
    .layout-header strong{
        position: relative;
        top: -20%;
        margin-left: 10px;
    }
    .layout-header img{
        width: 40px;
        height: 40px;
        line-height: 40px; 
        border-radius: 20px;
        margin-top: 10px;
        /*margin-right: 50px;*/
    }
    .ivu-breadcrumb{
        margin: 10px 0 5px 30px;
    }
    .footer{
        text-align: center;
    }
    .footer p{
        font-size: 14px;
    }
    .ivu-menu{
        font-size: 15px;
    }
    .ivu-menu-item{
        font-size: 15px;
    }
    ul{
        list-style: none;
    }
    .ivu-dropdown-item{
        text-align: center;
    }
</style>
<template>
        <Layout>
            <Sider breakpoint="md" collapsible :collapsed-width="78" v-model="isCollapsed" >
                <Menu theme="dark" width="auto" :open-names="['1']" @on-select="m=>{select(m)}" :style="{
                    margin: '80px 0 0 0'}">
                    <MenuItem v-for="pmenu in menuList" v-if="pmenu.children.length == 0" 
                    :name="pmenu.id" :key="pmenu.id">
                        <Icon :type="pmenu.icon"></Icon>
                            {{pmenu.name}}
                    </MenuItem>
                    <Submenu v-for="pmenu in menuList" v-if="pmenu.children.length > 0" :name="pmenu.id" :key="pmenu.id">
                        <template slot="title">
                            <Icon :type="pmenu.icon"></Icon>
                            {{pmenu.name}}
                        </template>
                        <MenuItem v-for="cmenu in pmenu.children" :name="cmenu.id" :key="cmenu.id">
                            <Icon :type="cmenu.icon"></Icon>
                            {{cmenu.name}}
                        </MenuItem>
                    </Submenu>
                </Menu>
                <div slot="trigger"></div>
            </Sider>
            <Layout :style="{left: '240px'}">
                <div class="layout-header">
                    <strong>
                            {{userName}}
                    </strong>
                    <Dropdown trigger="click" style="margin-right: 50px" @on-click="m=>{dropdownSelect(m)}">
                        <img src="../../images/kobe.jpg"></img>
                        <DropdownMenu class="dropdown-menu" slot="list">
                            <DropdownItem>退出</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </div>
                <div class="layout-breadcrumb">
                    <Breadcrumb>
                        <BreadcrumbItem to="/base/welcome">Home</BreadcrumbItem>
                        <BreadcrumbItem v-for="item in breadcrumbData" :to="item.url" :key="item.id">{{item.name}}</BreadcrumbItem>
                    </Breadcrumb>
                </div>
                <Content :style="{margin: '10px 30px 15px 30px', background: '#fff', minHeight: '512px'}">
                    <div class="layout-content">
                        <router-view></router-view>
                    </div>
                </Content>
                <Content class="footer" :style="{margin: '0 0 0 0', padding: 0, background: '#fff'}">
                    <br>
                    <p>江苏科技大学 | 苏州理工学院</p>
                    <p>计算机协会 | 隐匿</p>
                    <p :style="{padding: '0 0 18px 0'}">Copyright © 2018 <b></b></p>
                </Content>                
            </Layout>
        </Layout>
</template>
<script>
    export default {
        data(){
            return {
                /*用户名*/
                userName: null,
                /*一级菜单*/
                menuList: [],
                /*二级菜单*/
                menuSub: [],
                /*面包屑data*/
                breadcrumbData: [],
                isCollapsed: false
            }
        },
        mounted(){
            /*this.$router.push();*/
            /*this.userName = window.localStorage.getItem("currentUser_name");*/
            this.axios({
                method: 'get',
                url: '/user/'+window.localStorage.getItem("currentUser_name")
            }).then(function(response){
                this.userName = response.data.name;
            }.bind(this)).catch(function(error){
                alert(error);
            });
            this.axios({
                method: 'get',
                url: '/menu/'+window.localStorage.getItem("currentUser_name"),
            }).then(function(response){
                this.menuList = response.data;
                for(var i in this.menuList){
                    /*将所有父菜单添加进来*/
                    if (this.menuList[i].children.length == 0) {
                        this.menuSub.push(this.menuList[i]);
                    } else {
                        for(var j in this.menuList[i].children){
                            /* 将所有父菜单的子菜单添加进来*/
                            this.menuSub.push(this.menuList[i].children[j]);
                        }
                    }
                }
            }.bind(this)).catch(function(error){
                alert(error);
            });
        },
        methods:{
            /*菜单选择事件*/
            select(e){
                var filterMenus = this.menuSub.filter(function(menu){return (menu.url!=null && menu.url!='' && menu.id==e)});
                this.$router.push(filterMenus[0].url);
                this.breadcrumbData.splice(0,1,filterMenus[0]);
            },
            /*下拉菜单选择事件*/
            dropdownSelect(e){
                this.$store.dispatch('users/loginOUt',{"router":this.$router});
            }
        }
    }
</script>
